﻿$(document).ready(function () {

	// Bind available icons to live
	$('.im4u-available a').live('mouseover', function () {
		// Equalise heights of draggable/droppable panels to keep in view
		var availableHeight = $('.im4u-available').height();
		var activeHeight = $('.im4u-active').height();
		if (activeHeight < availableHeight) {
			$('.im4u-active').height(availableHeight);
		}
		// To do: prevent selected icons from being draggable (seems to be bugs with .not() method called on elements with multiple CSS classes when bound to live, hmmm...)
		$(this).draggable({
			revert: 'invalid',
			opacity: 0.7,
			helper: 'clone'
		});
	});

	// To do: trigger tooltip here to detail status of icon (where it's used etc)
	$('.im4u-available a, .im4u-active a').live('click', function () {
		return false;
	});

	// Allow available icons to be dropped into 'active' area
	$('.im4u-active').droppable({
		accept: '.im4u-available a',
		hoverClass: 'ui-state-active-active',
		activeClass: 'ui-state-hover-active',
		drop: function (event, ui) {
			$(this).append($(ui.draggable).clone());
			$(ui.draggable).addClass('selected');
		}
	});

	// Bind active icons to live
	$('.im4u-active a').live('mouseover', function () {
		$(this).draggable({
			revert: 'invalid',
			opacity: 0.7
		});
	});

	// Allow active icons to be dropped back into 'available' area
	$('.im4u-available').droppable({
		accept: '.im4u-active a',
		hoverClass: 'ui-state-active-available',
		activeClass: 'ui-state-hover-available',
		drop: function (event, ui) {
			// Remove active icon from DOM
			$(ui.draggable).remove();
			// Remove selected class from de-activated icon
			$('.im4u-available a[href="' + $(ui.draggable).attr('href') + '"]').removeClass('selected');
		}
	});

	// Filter
	// Delay function for filter key-up
	var delay = (function () {
		var timer = 0;
		return function (callback, ms) {
			clearTimeout(timer);
			timer = setTimeout(callback, ms);
		};
	})();

	//Call filter after delay
	$('#im4u-filter-input').keyup(function () {
		delay(function () {
			var filterValue = $('#im4u-filter-input').attr('value');
			// Reset all
			$('#im4u-available-col a').css('display', 'block');
			// Filter depending on input if field not empty
			if (filterValue != '') {
				$('#im4u-available-col a:not([title*=' + filterValue + '])').css('display', 'none');
			}
		}, 1000);
	});




});